<template>
  <div class="w-full h-full">
    <div class="box-border flex w-full h-full px-16 py-6 preditSetting">
      <div class="w-[55%] h-full overflow-y-auto scrollbar scrollbar-thumb-zinc-300">
        <div class="flex items-center gap-4 mt-4 mb-3">
          <div class="flex items-center">
            <span class="mr-28">预测管道</span>
            <el-select v-model="predictPipeline" placeholder="请选择预测管道" style="width: 250px">
              <el-option
                v-for="item in pipelineList"
                :key="item.id"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="flex mt-3 gap-28">
          <span class="">运行模式</span>
          <el-select v-model="operationMode" placeholder="请选择运行模式" style="width: 250px">
            <el-option
              v-for="item in operationModeList"
              :key="item.id"
              :label="item.value"
              :value="item.value"
              :disabled="item.disabled"
            />
          </el-select>
        </div>
        <div class="flex mt-3 gap-28">
          <span class="">工况类型</span>
          <el-cascader
            v-model="workType"
            :options="operationConditions"
            placeholder="请选择工况类型"
            class="!w-[250px]"
          />
        </div>
        <div v-if="!isShowFK" class="flex items-center mt-3">
          <span class="mr-[75px]">管道沿线地温</span>
          <el-input v-model="pipeTemperature" class="!w-[250px] mr-4" /><span class="">℃</span>
        </div>
        <div
          v-if="!isShowSequenceOil && !isShowMixedOil && !isShowFK"
          class="flex items-center mt-3"
        >
          <span class="mr-[75px]">注入油品类型</span>
          <el-select v-model="selectedOilType" placeholder="请选择油品种类" style="width: 250px">
            <el-option
              v-for="item in oilList"
              :key="item.id"
              :label="item.chinese_name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="mt-4">
          <!-- 折叠按钮区域 -->
          <div class="flex items-center">
            <div @click="timeSettingsVisible = !timeSettingsVisible" class="cursor-pointer">
              <el-icon v-if="timeSettingsVisible" class="mr-2">
                <ArrowDown />
              </el-icon>
              <el-icon v-else class="mr-2">
                <ArrowRight />
              </el-icon>
              <span>时间设置</span>
            </div>
          </div>

          <!-- 设置内容 -->
          <div v-show="timeSettingsVisible" class="mt-3 space-y-3">
            <div v-if="!isShow_QGQ" class="flex items-center">
              <span class="mr-28">模拟时间</span>
              <el-input v-model="simulationTime" class="!w-[250px] mr-4" />
              <span>小时</span>
            </div>
            <div class="flex items-center">
              <span class="mr-10">图表生成时间间隔</span>
              <el-input v-model="chartTimeInterval" class="!w-[250px] mr-4" />
              <span>分钟</span>
            </div>
          </div>
        </div>
        <div v-if="isShow_JX || isShowB16">
          <div class="flex items-center mt-3">
            <span class="mr-28">启输时长</span>
            <el-input v-model="startDuration" class="!w-[250px] mr-4" /><span class="">小时</span>
          </div>
          <div class="flex items-center mt-3">
            <span class="mr-28">停输时长</span>
            <el-input v-model="stopDuration" class="!w-[250px] mr-4" /><span class="">小时</span>
          </div>
        </div>
        <div v-if="!isShowFK" class="mt-6">
          <div class="flex items-center gap-4">
            <img :src="rightIcon" class="w-6 h-5" />
            控制条件设置
          </div>
          <div class="flex items-center mt-3" v-if="!isShowSequenceOil && !isShowMixedOil">
            <span class="mr-[75px]">首站出站流量</span
            ><el-input v-model="flow1" class="!w-[250px] mr-4" /><span class="">m³/h</span>
          </div>
          <div class="flex items-center mt-3" v-if="!isShowSequenceOil && !isShowMixedOil">
            <span class="mr-[75px]">首站出站温度</span
            ><el-input v-model="firstStationOutletTemperature" class="!w-[250px] mr-4" /><span
              class=""
              >℃</span
            >
          </div>
          <div class="flex items-center mt-3">
            <span class="mr-[75px]">末站进站压力</span
            ><el-input v-model="terminalStationInletPressure" class="!w-[250px] mr-4" /><span
              class=""
              >MPa</span
            >
          </div>
          <div v-if="isShowMixedOil">
            <Mixed
              ref="MixedRef"
              :oilList="oilList"
              v-model:mixOilType1="mixOilType1"
              v-model:mixOilType2="mixOilType2"
            ></Mixed>
          </div>
          <div
            v-if="isShowSequenceOil"
            class="mt-4 w-4/5 h-[160px] bg_detail rounded-lg flex flex-col items-center justify-between box-border"
          >
            <Sequence
              ref="SequenceRef"
              :oilList="oilList"
              v-model:oilType1="sequenceOilType1"
              v-model:oilType2="sequenceOilType2"
            ></Sequence>
          </div>
        </div>

        <div v-if="!isShowFK" class="mt-6">
          <div class="flex items-center gap-4">
            <img :src="rightIcon" class="w-6 h-5" />
            泵机组配置
          </div>
          <div class="w-4/5 mt-4 text-base bg-white">
            <div class="flex h-[50px]">
              <div
                class="bg_table_header flex items-center justify-center border w-[120px] box-border"
              >
                泵站
              </div>
              <div
                class="box-border flex items-center justify-center flex-1 bg_table_header topBorder bottomBorder rightBorder"
              >
                泵配置
              </div>
            </div>
            <div class="flex h-[40px]">
              <div
                class="flex items-center justify-center rightBorder bottomBorder leftBorder2 w-[120px] box-border"
              >
                泵站1
              </div>
              <div class="flex items-center flex-1 px-5 rightBorder bottomBorder">
                <div class="flex justify-between w-full">
                  <div><el-checkbox v-model="pump1">P-1</el-checkbox></div>
                  <div><el-checkbox v-model="pump2">P-2</el-checkbox></div>
                  <div><el-checkbox v-model="pump3">P-3</el-checkbox></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <FK v-if="isShowFK" ref="FKRef" :oilList="oilList"></FK>
      </div>
      <div class="w-[45%] h-full leftBorder border-gray-300 px-16 py-6 box-border">
        <div
          class="w-[560px] pr-10 h-[98%] overflow-y-auto overflow-x-hidden scrollbar scrollbar-thumb-zinc-300"
        >
          <transition name="fade-transform">
            <div class="mt-6" v-if="isShow_JZJ">
              <JZJ ref="JZJRef"></JZJ></div
          ></transition>
          <transition name="fade-transform">
            <div class="mt-6" v-if="isShow_SLYWTJ">
              <SLYWTJ ref="SLYWTJRef"></SLYWTJ></div
          ></transition>

          <transition name="fade-transform">
            <div class="mt-6" v-if="isShowSequence_JZJ">
              <SequenceJZJ
                ref="SequenceJZJRef"
                :oilType1="getOilName(sequenceOilType1)"
                :oilType2="getOilName(sequenceOilType2)"
              ></SequenceJZJ>
            </div>
          </transition>
          <transition name="fade-transform">
            <div class="mt-6" v-if="isShowMixed_JZJ">
              <MixedJZJ
                ref="MixedJZJRef"
                :oilType1="getOilName(mixOilType1)"
                :oilType2="getOilName(mixOilType2)"
              ></MixedJZJ>
            </div>
          </transition>

          <transition name="fade-transform">
            <div class="mt-6" v-if="isShow_QGQ">
              <QGQ ref="QGQRef"></QGQ></div
          ></transition>

          <transition name="fade-transform">
            <div class="mt-6" v-if="isShowSequence_SLYWTJ">
              <SequenceSLYWTJ
                ref="SequenceSLYWTJRef"
                :oilType1="getOilName(sequenceOilType1)"
                :oilType2="getOilName(sequenceOilType2)"
              ></SequenceSLYWTJ>
            </div>
          </transition>

          <transition name="fade-transform">
            <div class="mt-6" v-if="isShow_GDXL">
              <GDXL ref="GDXLRef"></GDXL></div
          ></transition>
          <transition name="fade-transform">
            <div class="mt-6" v-if="isShow_FMGD">
              <FMGD ref="FMGDRef"></FMGD></div
          ></transition>
          <transition name="fade-transform">
            <div class="mt-6" v-if="isShow_BJZTY">
              <BJZTY ref="BJZTYRef"></BJZTY></div
          ></transition>
        </div>
      </div>
    </div>
    <div class="absolute flex gap-8 right-8 bottom-10">
      <div class="flex items-center justify-center custom-button" @click="resetSimulation">
        重新模拟
      </div>
      <div
        class="flex items-center justify-center"
        :class="{ 'custom-button-not-active ': !isFormValid, 'custom-button': isFormValid }"
        @click="startPrediction"
      >
        开始预测
      </div>
    </div>
  </div>
</template>

<script setup>
import { snapdom } from '@zumer/snapdom'
import {
  postSPSWBX_WTYX,
  postSPSWBX_JXSS,
  postSPSWBX_JIANZU,
  postSPSWBX_SLTJ,
  postSPSBKX_JANNZU,
  postSPSBKX_SXSS,
  postSPSS81_701_WTYX,
  postSPSS81_701_JIANZU,
  postSPSS701_ZZ_SXSS,
  postSPSS701_ZZ_JANNZU,
  postSPSWBX_PIG,
  postSPSWBX_XL,
  postSPSBKX_CHSS,
  postSPSBKX_CHSS_DRA,
  postSPSBKX_SXSS_PIG,
  postSPSBKX_CHSS_PIG,
  postSPSS701_ZZ_SXSS_PIG,
  postSPSS81_701_PIG,
  postSPSS81_701_XL,
  postSPSBKX_SXSS_XL,
  postSPSBKX_CHSS_XL,
  postSPSS701_ZZ_SXSS_XL,
  postSPSBKX_CHSS_SLTJ,
  postSPSS701_ZZ_SLTJ,
  postSPSS81_701_SLTJ,
  postSPSWBX_FMYC,
  postSPSS81_701_FMYC,
  postSPSBKX_FMYC,
  postSPSBKX_SLTJ,
  postSPSBKX_CHSS_FMY,
  postSPSS701_ZZ_FMYC,
  postSPSWBX_WTYX_BJZTY,
  postSPSBKX_SXSS_BJZTY,
  postSPSBKX_CHSS_BJZTY,
  postSPSS81_701_WTYX_BJZTY,
  getMaxAndMin,
  postSPSWBX_Qmin,
  postSPSWBX_Qmax,
  postSPSWBX_TSTIME_Psmin,
  postSPSS81_701_Qmin,
  postSPSS81_701_Qmax,
  postSPSS81_701_TSTIME,
  postSPSFK_WT,
  postSPSB16_WT
} from '@/api/sps'

import rightIcon from '@/assets/images/rightIcon.png'
import { ArrowRight, ArrowDown } from '@element-plus/icons-vue'
import { useSimulationStore } from '@/stores/modules/simulation'
import { useRouter } from 'vue-router'
import { watch } from 'vue'

import JZJ from './normal/JZJ/index.vue'
import QGQ from './normal/QGQ/index.vue'
import SLYWTJ from './normal/SLYWTJ/index.vue'
import GDXL from './abnormal/GDXL/index.vue'
import BJZTY from './abnormal/BJZTY/index.vue'
import FMGD from './abnormal/FMYCGD/index.vue'
import Sequence from './sequence/index.vue'
import Mixed from './mixed/index.vue'
import SequenceSLYWTJ from './normal/sequence_SLYWTJ/index.vue'
import SequenceJZJ from './normal/sequence_JZJ/index.vue'
import MixedJZJ from './normal/mixed_JZJ/index.vue'

import FK from './WT/FK/index.vue'

const router = useRouter()

const JZJRef = ref(null)
const QGQRef = ref(null)
const SLYWTJRef = ref(null)
const GDXLRef = ref(null)
const BJZTYRef = ref(null)
const FMGDRef = ref(null)
const SequenceRef = ref(null)
const MixedRef = ref(null)
const SequenceSLYWTJRef = ref(null)
const SequenceJZJRef = ref(null)
const MixedJZJRef = ref(null)
const FKRef = ref(null)

const props = defineProps({
  oilList: { type: Array },
  pipelineList: { type: Array },
  operationModeList: { type: Array },
  operationConditions: { type: Array }
})

const isPredictLoading = defineModel('isPredictLoading')
const predictPipeline = defineModel('predictPipeline')

watch(predictPipeline, () => {
  operationMode.value = ''
  workType.value = []
})

const simulationStore = useSimulationStore()

const operationMode = ref('')

const getOilName = (oils_name) => {
  return props.oilList.find((item) => item.oils_name === oils_name)?.chinese_name
}

// 时间设置折叠控制
const timeSettingsVisible = ref(false)

const workType = ref([])

const selectedOilType = ref(2)
const simulationTime = ref('3')
const pipeTemperature = ref('16')
const chartTimeInterval = ref('5')
const startDuration = ref('15')
const stopDuration = ref('9')

const terminalStationInletPressure = ref('0.05')
const firstStationOutletTemperature = ref('60')
const flow1 = ref('90')

const pump1 = ref(false)
const pump2 = ref(true)
const pump3 = ref(false)

const isShow_JX = ref(false)

const isShow_JZJ = ref(false)

const isShow_SLYWTJ = ref(false)

const isShowSequenceOil = ref(false)
const isShowSequence_JZJ = ref(false)
const isShowMixed_JZJ = ref(false)

const isShowSequence_SLYWTJ = ref(false)

// const adjustmentFlow1 = ref('260')
// const adjustmentFlow2 = ref('200')
// const adjustmentTemperature1 = ref('25')
// const adjustmentTemperature2 = ref('30')

const isShow_QGQ = ref(false)

const sequenceOilType1 = ref('WEHY_2024S')
const sequenceOilType2 = ref('BLY_2024S')

const mixOilType1 = ref('WEHY_2024S')
const mixOilType2 = ref('BLY_2024S')

const isShow_GDXL = ref(false)

const isShow_FMGD = ref(false)

const isShow_BJZTY = ref(false)

const isShowMixedOil = ref(false)

const isShowB16 = ref(false)

const isShowFK = ref(false)

watch(
  [predictPipeline, operationMode, workType],
  ([newPredictPipeline, newOperationMode, newWorkType]) => {
    console.log('监听页面运行模式和工况类型的变化:', newOperationMode, newWorkType)

    // 初始化所有工况显示状态为 false
    isShow_SLYWTJ.value = false
    isShow_JX.value = false
    isShow_JZJ.value = false
    isShowMixedOil.value = false
    isShowSequenceOil.value = false
    isShowSequence_JZJ.value = false
    isShow_QGQ.value = false
    isShowMixed_JZJ.value = false
    isShowSequence_SLYWTJ.value = false
    isShow_GDXL.value = false
    isShow_FMGD.value = false
    isShow_BJZTY.value = false
    isShowB16.value = false
    isShowFK.value = false

    // 将单选的工况类型转换为更易读的格式
    const category = newWorkType[0] // 工况大类（如"正常工况"）
    const type = newWorkType[1] // 具体工况类型（如"加减阻剂输送"）

    console.log('处理后的工况类型:', category, type)

    // 根据选择的工况类型设置对应的状态
    if (newOperationMode === '间歇输送') {
      isShow_JX.value = true
    }
    if (newOperationMode === '顺序输送') {
      isShowSequenceOil.value = true
    }
    if (newOperationMode === '掺混输送') {
      isShowMixedOil.value = true
    }

    if (newOperationMode === '顺序输送' && type === '加减阻剂输送') {
      isShowSequence_JZJ.value = true
    } else if (newOperationMode === '顺序输送' && type === '输量与油温调节') {
      isShowSequence_SLYWTJ.value = true
    } else if (newOperationMode === '掺混输送' && type === '加减阻剂输送') {
      isShowMixed_JZJ.value = true
    } else if (type === '清管器运行') {
      isShow_QGQ.value = true
    } else if (type === '加减阻剂输送') {
      isShow_JZJ.value = true
    } else if (type === '输量与油温调节') {
      isShow_SLYWTJ.value = true
    } else if (type === '管道泄漏') {
      isShow_GDXL.value = true
    } else if (type === 'ESD阀门异常关断') {
      isShow_FMGD.value = true
    } else if (type === '泵机组停运') {
      isShow_BJZTY.value = true
    }

    if (newPredictPipeline === '北十六线') {
      isShowB16.value = true
    } else if (newPredictPipeline === '风克线') {
      isShowFK.value = true
    }
  }
)

// 添加表单校验计算属性
const isFormValid = computed(() => {
  // 基础必填字段验证（所有工况都需要的字段）
  const baseRequiredFields = [
    predictPipeline.value,
    operationMode.value,
    workType.value,
    pipeTemperature.value,
    // 清管器运行工况下不需要验证 simulationTime
    ...(workType.value && workType.value[1] === '清管器运行' ? [] : [simulationTime.value]),
    chartTimeInterval.value
  ]

  // 检查基础字段
  const baseFieldsValid = baseRequiredFields.every(
    (field) => field && (Array.isArray(field) ? field.length > 0 : true)
  )

  if (!baseFieldsValid) return false

  // 根据运行模式检查额外字段
  if (!isShowSequenceOil.value) {
    const modeFields = [flow1.value, firstStationOutletTemperature.value, selectedOilType.value]
    if (!modeFields.every((field) => field)) return false
  }

  // 检查末站进站压力（所有工况都需要）
  if (!terminalStationInletPressure.value) return false

  // 根据工况类型进行特定验证

  // 间歇输送工况特定字段
  if (isShow_JX.value) {
    if (!startDuration.value || !stopDuration.value) return false
  }

  // 顺序输送工况
  if (isShowSequenceOil.value) {
    if (!SequenceRef.value?.isFormValid) {
      return false
    }
  }

  // 加减阻剂输送特定字段
  if (isShow_JZJ.value) {
    if (!JZJRef.value?.isFormValid) {
      return false
    }
  }

  // 输量与油温调节特定字段
  if (isShow_SLYWTJ.value) {
    if (!SLYWTJRef.value?.isFormValid) {
      return false
    }
  }

  // 顺序输送加减阻剂工况特定字段
  if (isShowSequence_JZJ.value) {
    if (!SequenceJZJRef.value?.isFormValid) {
      return false
    }
  }

  if (isShowMixed_JZJ.value) {
    if (!MixedJZJRef.value?.isFormValid) {
      return false
    }
  }

  if (isShowSequence_SLYWTJ.value) {
    if (!SequenceSLYWTJRef.value?.isFormValid) {
      return false
    }
  }

  if (isShow_QGQ.value) {
    if (!QGQRef.value?.isFormValid) {
      return false
    }
  }

  // 管道泄漏特定字段
  if (isShow_GDXL.value) {
    if (!GDXLRef.value?.isFormValid) {
      return false
    }
  }

  // ESD阀门异常关断特定字段
  if (isShow_FMGD.value) {
    if (!FMGDRef.value?.isFormValid) {
      return false
    }
  }

  // 泵机组停运特定字段
  if (isShow_BJZTY.value) {
    if (!BJZTYRef.value?.isFormValid) {
      return false
    }
  }

  // 数值验证
  const numericValues = [
    { value: parseFloat(simulationTime.value), min: 0.1, max: 72 },
    { value: parseFloat(chartTimeInterval.value), min: 1, max: 60 }
  ]

  // 根据运行模式添加额外数值验证
  if (!isShowSequenceOil.value) {
    numericValues.push(
      { value: parseFloat(flow1.value), min: 10, max: 1500 },
      { value: parseFloat(firstStationOutletTemperature.value), min: -20, max: 80 }
    )
  }

  // 添加掺混输送的校验
  if (isShowMixedOil.value) {
    if (!MixedRef.value?.isFormValid) {
      return false
    }
  }

  // 添加风克线的校验
  if (isShowFK.value) {
    if (!FKRef.value?.isFormValid) {
      return false
    }
  }

  // 所有验证都通过
  return true
})

const startPrediction = async () => {
  // 基础必填字段验证（所有工况都需要的字段）
  const baseRequiredFields = [
    { value: predictPipeline.value, name: '预测管道' },
    { value: operationMode.value, name: '运行模式' },
    { value: workType.value, name: '工况类型' },
    { value: pipeTemperature.value, name: '管道沿线地温' },
    // 清管器运行工况下不需要验证 simulationTime
    ...(workType.value && workType.value[1] === '清管器运行'
      ? []
      : [{ value: simulationTime.value, name: '模拟时间' }]),
    { value: chartTimeInterval.value, name: '图表时间间隔' }
  ]

  // 检查基础必填字段
  for (const field of baseRequiredFields) {
    if (!field.value || (Array.isArray(field.value) && field.value.length === 0)) {
      ElMessage.error(`${field.name}不能为空`)
      return
    }
  }

  // 根据运行模式添加必填字段
  if (!isShowSequenceOil.value) {
    const modeFields = [
      { value: flow1.value, name: '首站出站流量' },
      { value: firstStationOutletTemperature.value, name: '首站出站温度' },
      { value: selectedOilType.value, name: '注入油品类型' }
    ]

    for (const field of modeFields) {
      if (!field.value) {
        ElMessage.error(`${field.name}不能为空`)
        return
      }
    }
  }

  // 始终检查末站进站压力
  if (!terminalStationInletPressure.value) {
    ElMessage.error('末站进站压力不能为空')
    return
  }

  // 根据工况类型进行特定验证

  // 间歇输送工况特定字段
  if (isShow_JX.value) {
    if (!startDuration.value) {
      ElMessage.error('启输时长不能为空')
      return
    }
    if (!stopDuration.value) {
      ElMessage.error('停输时长不能为空')
      return
    }
  }

  // 顺序输送等特定字段
  if (isShowSequenceOil.value) {
    if (!SequenceRef.value.validateSettings()) {
      return
    }
  }

  // 加减阻剂输送特定字段
  if (isShow_JZJ.value) {
    if (!JZJRef.value.validateSettings()) {
      return
    }
  }

  // 输量与油温调节特定字段
  if (isShow_SLYWTJ.value) {
    if (!SLYWTJRef.value.validateSettings()) {
      return
    }
  }

  // 顺序输送加减阻剂工况特定字段
  if (isShowSequence_JZJ.value) {
    if (!SequenceJZJRef.value.validateSettings()) {
      return
    }
  }

  // 清管器特定字段
  if (isShow_QGQ.value) {
    if (!QGQRef.value.validateSettings()) {
      return
    }
  }
  // 顺序输送加减阻剂工况特定字段
  if (isShowMixed_JZJ.value) {
    if (!MixedJZJRef.value.validateSettings()) {
      return
    }
  }

  // 顺序输送 输量与油温调节特定字段
  if (isShowSequence_SLYWTJ.value) {
    if (!SequenceSLYWTJRef.value.validateSettings()) {
      return
    }
  }

  // 管道泄漏特定字段
  if (isShow_GDXL.value) {
    if (!GDXLRef.value.validateSettings()) {
      return
    }
  }

  // ESD阀门异常关断特定字段
  if (isShow_FMGD.value) {
    if (!FMGDRef.value.validateSettings()) {
      return
    }
  }

  // 泵机组停运特定字段
  if (isShow_BJZTY.value) {
    if (!BJZTYRef.value.validateSettings()) {
      return
    }
  }

  // 添加掺混输送的校验
  if (isShowMixedOil.value) {
    if (!MixedRef.value.validateSettings()) {
      return
    }
  }

  // 添加风克线的校验
  if (isShowFK.value) {
    if (!FKRef.value.validateSettings()) {
      return
    }
  }

  // 数值验证
  const numericValidations = [
    {
      value: parseFloat(simulationTime.value),
      name: '模拟时间',
      min: 0.1,
      max: 72,
      unit: '小时'
    },
    {
      value: parseFloat(chartTimeInterval.value),
      name: '图表时间间隔',
      min: 1,
      max: 60,
      unit: '分钟'
    }
  ]

  // 根据运行模式添加额外数值验证
  if (!isShowSequenceOil.value) {
    numericValidations.push(
      { value: parseFloat(flow1.value), name: '首站出站流量', min: 10, max: 1500, unit: 'm³/h' },
      {
        value: parseFloat(firstStationOutletTemperature.value),
        name: '首站出站温度',
        min: -20,
        max: 80,
        unit: '°C'
      }
    )
  }

  // 所有验证通过，继续执行预测逻辑

  // 截图前先打开控制条件设置
  timeSettingsVisible.value = true
  // 截图
  const makeScreenshot = async () => {
    const card = document.querySelector('.preditSetting')
    const capture = await snapdom(card, {
      scale: 1, // 2倍清晰度
      backgroundColor: 'rgb(246, 246, 246)', // 背景色
      embedFonts: true, // 内嵌字体
      compress: true // 压缩优化
    })
    // const png = await capture.toPng()
    // 直接触发下载
    // await capture.download({
    //   format: 'png',
    //   filename: '参数设置'
    // })
    // document.body.appendChild(png)
    simulationStore.preditParams = capture
    // console.log('🐯 ~ makeScreenshot ~ image:', capture)
  }
  setTimeout(() => {
    makeScreenshot()
  })

  isPredictLoading.value = true
  simulationStore.curPipeLine = '单一'
  simulationStore.simulationTime = Number(simulationTime.value)
  simulationStore.predictPipeline = predictPipeline.value
  simulationStore.chartTimeInterval = Number(chartTimeInterval.value)

  // 获取最小进站温度和最大出站压力
  const MaxAndMinRes = await getMaxAndMin({
    pipeline_name: '乌-百线',
    oils_id: '1'
  })
  simulationStore.T_m_min = MaxAndMinRes.data.T_m_min
  simulationStore.P_S_max = MaxAndMinRes.data.P_S_max

  // 让全线的调油一线的batch_data清空
  simulationStore.batch_data_ty = []

  // TODO: ------------------------------请求后端接口，获取结果-------------------------------

  // 参数校准参数，每个工况都得带上
  const baseParams = {
    ruf_wbx: simulationStore.ruf_wbx,
    K_G_wbx: simulationStore.K_G_wbx,
    K_F_wbx: simulationStore.K_F_wbx,
    ruf_bkx: simulationStore.ruf_bkx,
    K_G_bkx: simulationStore.K_G_bkx,
    ruf_dyyx: simulationStore.ruf_dyyx,
    K_G_dyyx: simulationStore.K_G_dyyx,
    ruf_81x: simulationStore.ruf_81x,
    K_G_81x: simulationStore.K_G_81x
  }

  let res
  try {
    if (
      predictPipeline.value === '乌百线（乌尔禾站-百克站）' &&
      operationMode.value === '单油品连续输送' &&
      workType.value[1] === 'PID控制下的稳态输送'
    ) {
      res = await postSPSWBX_WTYX({
        ...baseParams,
        oils_id: selectedOilType.value,
        Q_S_OUT: flow1.value,
        P_M_IN: terminalStationInletPressure.value,
        T_S_OUT: firstStationOutletTemperature.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        // 管道沿线地温
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
      console.log('🐯 ~ startPrediction ~  simulationStore.pig_data:', simulationStore.pig_data)
    } else if (
      predictPipeline.value === '乌百线（乌尔禾站-百克站）' &&
      operationMode.value === '间歇输送' &&
      workType.value[1] === 'PID控制下的稳态输送'
    ) {
      res = await postSPSWBX_JXSS({
        ...baseParams,
        oils_id: selectedOilType.value,
        Q_S_OUT: flow1.value,
        P_M_IN: terminalStationInletPressure.value,
        T_S_OUT: firstStationOutletTemperature.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        TS_time: stopDuration.value,
        QS_time: startDuration.value,
        DT: chartTimeInterval.value
      })
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '乌百线（乌尔禾站-百克站）' &&
      operationMode.value === '单油品连续输送' &&
      workType.value[1] === '加减阻剂输送'
    ) {
      res = await postSPSWBX_JIANZU({
        ...baseParams,
        oils_id: selectedOilType.value,
        Q_S_OUT: flow1.value,
        P_M_IN: terminalStationInletPressure.value,
        T_S_OUT: firstStationOutletTemperature.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...JZJRef.value.getParamsData()
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '乌百线（乌尔禾站-百克站）' &&
      operationMode.value === '单油品连续输送' &&
      workType.value[1] === '输量与油温调节'
    ) {
      res = await postSPSWBX_SLTJ({
        ...baseParams,
        oils_id: selectedOilType.value,
        Q_S_OUT: flow1.value,
        P_M_IN: terminalStationInletPressure.value,
        T_S_OUT: firstStationOutletTemperature.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...SLYWTJRef.value.getParamsData()
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '乌百线（乌尔禾站-百克站）' &&
      operationMode.value === '单油品连续输送' &&
      workType.value[1] === '清管器运行'
    ) {
      res = await postSPSWBX_PIG({
        ...baseParams,
        oils_id: selectedOilType.value,
        Q_S_OUT: flow1.value,
        P_M_IN: terminalStationInletPressure.value,
        T_S_OUT: firstStationOutletTemperature.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...QGQRef.value.getParamsData()
      })
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '乌百线（乌尔禾站-百克站）' &&
      operationMode.value === '单油品连续输送' &&
      workType.value[1] === '管道泄漏'
    ) {
      res = await postSPSWBX_XL({
        ...baseParams,
        oils_id: selectedOilType.value,
        Q_S_OUT: flow1.value,
        P_M_IN: terminalStationInletPressure.value,
        T_S_OUT: firstStationOutletTemperature.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...GDXLRef.value.getParamsData()
      })
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '乌百线（乌尔禾站-百克站）' &&
      operationMode.value === '单油品连续输送' &&
      workType.value[1] === 'ESD阀门异常关断'
    ) {
      res = await postSPSWBX_FMYC({
        ...baseParams,
        oils_id: selectedOilType.value,
        Q_S_OUT: flow1.value,
        P_M_IN: terminalStationInletPressure.value,
        T_S_OUT: firstStationOutletTemperature.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...FMGDRef.value.getParamsData()
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '乌百线（乌尔禾站-百克站）' &&
      operationMode.value === '单油品连续输送' &&
      workType.value[1] === '泵机组停运'
    ) {
      res = await postSPSWBX_WTYX_BJZTY({
        ...baseParams,
        oils_id: selectedOilType.value,
        Q_S_OUT: flow1.value,
        P_M_IN: terminalStationInletPressure.value,
        T_S_OUT: firstStationOutletTemperature.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...BJZTYRef.value.getParamsData()
      })
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '百克线（百克站-701站）' &&
      operationMode.value === '顺序输送' &&
      workType.value[1] === '加减阻剂输送'
    ) {
      res = await postSPSBKX_JANNZU({
        ...baseParams,
        P_M_IN: terminalStationInletPressure.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...SequenceRef.value.getParamsData(),
        ...SequenceJZJRef.value.getParamsData()
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '百克线（百克站-701站）' &&
      operationMode.value === '掺混输送' &&
      workType.value[1] === '加减阻剂输送'
    ) {
      res = await postSPSBKX_CHSS_DRA({
        ...baseParams,
        P_M_IN: terminalStationInletPressure.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...MixedRef.value.getParamsData(),
        ...MixedJZJRef.value.getParamsData()
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '百克线（百克站-701站）' &&
      operationMode.value === '顺序输送' &&
      workType.value[1] === 'PID控制下的稳态输送'
    ) {
      res = await postSPSBKX_SXSS({
        ...baseParams,
        P_M_IN: terminalStationInletPressure.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...SequenceRef.value.getParamsData()
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '百克线（百克站-701站）' &&
      operationMode.value === '掺混输送' &&
      workType.value[1] === 'PID控制下的稳态输送'
    ) {
      res = await postSPSBKX_CHSS({
        ...baseParams,
        P_M_IN: terminalStationInletPressure.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...MixedRef.value.getParamsData()
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '百克线（百克站-701站）' &&
      operationMode.value === '顺序输送' &&
      workType.value[1] === '清管器运行'
    ) {
      res = await postSPSBKX_SXSS_PIG({
        ...baseParams,
        P_M_IN: terminalStationInletPressure.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...SequenceRef.value.getParamsData(),
        ...QGQRef.value.getParamsData()
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '百克线（百克站-701站）' &&
      operationMode.value === '掺混输送' &&
      workType.value[1] === '清管器运行'
    ) {
      res = await postSPSBKX_CHSS_PIG({
        ...baseParams,
        P_M_IN: terminalStationInletPressure.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...MixedRef.value.getParamsData(),
        ...QGQRef.value.getParamsData()
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '百克线（百克站-701站）' &&
      operationMode.value === '掺混输送' &&
      workType.value[1] === '输量与油温调节'
    ) {
      res = await postSPSBKX_CHSS_SLTJ({
        ...baseParams,
        P_M_IN: terminalStationInletPressure.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        Time_end: simulationTime.value,
        ...MixedRef.value.getParamsData(),
        ...SLYWTJRef.value.getParamsData()
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '百克线（百克站-701站）' &&
      operationMode.value === '顺序输送' &&
      workType.value[1] === '管道泄漏'
    ) {
      res = await postSPSBKX_SXSS_XL({
        ...baseParams,
        P_M_IN: terminalStationInletPressure.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...SequenceRef.value.getParamsData(),
        ...GDXLRef.value.getParamsData()
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '百克线（百克站-701站）' &&
      operationMode.value === '掺混输送' &&
      workType.value[1] === '管道泄漏'
    ) {
      res = await postSPSBKX_CHSS_XL({
        ...baseParams,
        P_M_IN: terminalStationInletPressure.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...MixedRef.value.getParamsData(),
        ...GDXLRef.value.getParamsData()
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '百克线（百克站-701站）' &&
      operationMode.value === '顺序输送' &&
      workType.value[1] === '输量与油温调节'
    ) {
      res = await postSPSBKX_SLTJ({
        ...baseParams,
        P_M_IN: terminalStationInletPressure.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...SequenceRef.value.getParamsData(),
        ...SequenceSLYWTJRef.value.getParamsData()
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '百克线（百克站-701站）' &&
      operationMode.value === '顺序输送' &&
      workType.value[1] === 'ESD阀门异常关断'
    ) {
      res = await postSPSBKX_FMYC({
        ...baseParams,
        P_M_IN: terminalStationInletPressure.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...SequenceRef.value.getParamsData(),
        // Q1_IN_tj: adjustmentFlow1.value,
        // Q2_IN_tj: adjustmentFlow2.value,
        // TEM_1_tj: adjustmentTemperature1.value,
        // TEM_2_tj: adjustmentTemperature2.value,
        ...FMGDRef.value.getParamsData()
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '百克线（百克站-701站）' &&
      operationMode.value === '顺序输送' &&
      workType.value[1] === '泵机组停运'
    ) {
      res = await postSPSBKX_SXSS_BJZTY({
        ...baseParams,
        P_M_IN: terminalStationInletPressure.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...SequenceRef.value.getParamsData(),
        ...BJZTYRef.value.getParamsData()
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '百克线（百克站-701站）' &&
      operationMode.value === '掺混输送' &&
      workType.value[1] === 'ESD阀门异常关断'
    ) {
      res = await postSPSBKX_CHSS_FMY({
        ...baseParams,
        P_M_IN: terminalStationInletPressure.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...MixedRef.value.getParamsData(),
        ...FMGDRef.value.getParamsData()
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '百克线（百克站-701站）' &&
      operationMode.value === '掺混输送' &&
      workType.value[1] === '泵机组停运'
    ) {
      res = await postSPSBKX_CHSS_BJZTY({
        ...baseParams,
        P_M_IN: terminalStationInletPressure.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...MixedRef.value.getParamsData(),
        ...BJZTYRef.value.getParamsData()
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '新81#线（81#站-701）' &&
      operationMode.value === '单油品连续输送' &&
      workType.value[1] === 'PID控制下的稳态输送'
    ) {
      res = await postSPSS81_701_WTYX({
        ...baseParams,
        oils_id: selectedOilType.value,
        Q_S_OUT: flow1.value,
        P_M_IN: terminalStationInletPressure.value,
        T_S_OUT: firstStationOutletTemperature.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        // 管道沿线地温
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '新81#线（81#站-701）' &&
      operationMode.value === '单油品连续输送' &&
      workType.value[1] === '加减阻剂输送'
    ) {
      res = await postSPSS81_701_JIANZU({
        ...baseParams,
        oils_id: selectedOilType.value,
        Q_S_OUT: flow1.value,
        P_M_IN: terminalStationInletPressure.value,
        T_S_OUT: firstStationOutletTemperature.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...JZJRef.value.getParamsData()
      })
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '新81#线（81#站-701）' &&
      operationMode.value === '单油品连续输送' &&
      workType.value[1] === '清管器运行'
    ) {
      res = await postSPSS81_701_PIG({
        ...baseParams,
        oils_id: selectedOilType.value,
        Q_S_OUT: flow1.value,
        P_M_IN: terminalStationInletPressure.value,
        T_S_OUT: firstStationOutletTemperature.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...QGQRef.value.getParamsData()
      })
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '新81#线（81#站-701）' &&
      operationMode.value === '单油品连续输送' &&
      workType.value[1] === '管道泄漏'
    ) {
      res = await postSPSS81_701_XL({
        ...baseParams,
        oils_id: selectedOilType.value,
        Q_S_OUT: flow1.value,
        P_M_IN: terminalStationInletPressure.value,
        T_S_OUT: firstStationOutletTemperature.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...GDXLRef.value.getParamsData()
      })
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '新81#线（81#站-701）' &&
      operationMode.value === '单油品连续输送' &&
      workType.value[1] === '输量与油温调节'
    ) {
      res = await postSPSS81_701_SLTJ({
        ...baseParams,
        oils_id: selectedOilType.value,
        Q_S_OUT: flow1.value,
        P_M_IN: terminalStationInletPressure.value,
        T_S_OUT: firstStationOutletTemperature.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...SLYWTJRef.value.getParamsData()
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '新81#线（81#站-701）' &&
      operationMode.value === '单油品连续输送' &&
      workType.value[1] === 'ESD阀门异常关断'
    ) {
      res = await postSPSS81_701_FMYC({
        ...baseParams,
        oils_id: selectedOilType.value,
        Q_S_OUT: flow1.value,
        P_M_IN: terminalStationInletPressure.value,
        T_S_OUT: firstStationOutletTemperature.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...FMGDRef.value.getParamsData()
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '新81#线（81#站-701）' &&
      operationMode.value === '单油品连续输送' &&
      workType.value[1] === '泵机组停运'
    ) {
      res = await postSPSS81_701_WTYX_BJZTY({
        ...baseParams,
        oils_id: selectedOilType.value,
        Q_S_OUT: flow1.value,
        P_M_IN: terminalStationInletPressure.value,
        T_S_OUT: firstStationOutletTemperature.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...BJZTYRef.value.getParamsData()
      })
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '调油一线（701站-总站）' &&
      operationMode.value === '顺序输送' &&
      workType.value[1] === 'PID控制下的稳态输送'
    ) {
      res = await postSPSS701_ZZ_SXSS({
        ...baseParams,
        P_M_IN: terminalStationInletPressure.value,
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...SequenceRef.value.getParamsData()
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '调油一线（701站-总站）' &&
      operationMode.value === '顺序输送' &&
      workType.value[1] === '加减阻剂输送'
    ) {
      res = await postSPSS701_ZZ_JANNZU({
        ...baseParams,
        P_M_IN: terminalStationInletPressure.value,
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...SequenceRef.value.getParamsData(),
        ...SequenceJZJRef.value.getParamsData()
      })

      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '调油一线（701站-总站）' &&
      operationMode.value === '顺序输送' &&
      workType.value[1] === '清管器运行'
    ) {
      res = await postSPSS701_ZZ_SXSS_PIG({
        ...baseParams,
        P_M_IN: terminalStationInletPressure.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...SequenceRef.value.getParamsData(),
        ...QGQRef.value.getParamsData()
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '调油一线（701站-总站）' &&
      operationMode.value === '顺序输送' &&
      workType.value[1] === '管道泄漏'
    ) {
      res = await postSPSS701_ZZ_SXSS_XL({
        ...baseParams,
        P_M_IN: terminalStationInletPressure.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...SequenceRef.value.getParamsData(),
        ...GDXLRef.value.getParamsData()
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '调油一线（701站-总站）' &&
      operationMode.value === '顺序输送' &&
      workType.value[1] === '输量与油温调节'
    ) {
      res = await postSPSS701_ZZ_SLTJ({
        ...baseParams,
        P_M_IN: terminalStationInletPressure.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...SequenceRef.value.getParamsData(),
        ...SequenceSLYWTJRef.value.getParamsData()
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '调油一线（701站-总站）' &&
      operationMode.value === '顺序输送' &&
      workType.value[1] === 'ESD阀门异常关断'
    ) {
      res = await postSPSS701_ZZ_FMYC({
        ...baseParams,
        P_M_IN: terminalStationInletPressure.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        DT: chartTimeInterval.value,
        ...SequenceRef.value.getParamsData(),
        // Q1_IN_tj: adjustmentFlow1.value,
        // Q2_IN_tj: adjustmentFlow2.value,
        // TEM_1_tj: adjustmentTemperature1.value,
        // TEM_2_tj: adjustmentTemperature2.value,
        ...FMGDRef.value.getParamsData()
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '北十六线' &&
      operationMode.value === '单油品连续输送' &&
      workType.value[1] === 'PID控制下的稳态输送'
    ) {
      res = await postSPSB16_WT({
        ...baseParams,
        oils_id: selectedOilType.value,
        Q_S_OUT: flow1.value,
        P_M_IN: terminalStationInletPressure.value,
        T_S_OUT: firstStationOutletTemperature.value,
        PUMP1: pump1.value ? '1' : '0',
        PUMP2: pump2.value ? '1' : '0',
        PUMP3: pump3.value ? '1' : '0',
        Time_end: simulationTime.value,
        T_g: pipeTemperature.value,
        TS_time: stopDuration.value,
        QS_time: startDuration.value,
        DT: chartTimeInterval.value
      })
      console.log('🐯 ~ startPrediction ~ res:', res)
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_variation_data = res.data.distance_variation_data
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      simulationStore.pig_data = res.data.pig_data || []
    } else if (
      predictPipeline.value === '风克线' &&
      operationMode.value === '单油品连续输送' &&
      workType.value[1] === 'PID控制下的稳态输送'
    ) {
      res = await postSPSFK_WT({
        ...baseParams,
        Time_end: simulationTime.value,
        DT: chartTimeInterval.value,
        ...FKRef.value.getParamsData()
      })
      simulationStore.isRouteToPrediction = true
      simulationStore.distance_qx1 = res.data.distance_variation_data
      simulationStore.distance_qx2 = res.data.distance_variation_branch_data
      simulationStore.distance_variation_data = simulationStore.distance_qx1
      simulationStore.time_variation_data = res.data.time_variation_data
      simulationStore.fashi_data = res.data.fashi_data
      simulationStore.batch_data = res.data.batch_data || []
      // simulationStore.wb_oil = wb_inputOilType.value
      simulationStore.batch_data_ty = res.data.batch_branch_data
      simulationStore.curPipeLine = '全线'
      simulationStore.predictPipeline = '乌百线（乌尔禾站-百克站）'
    }

    simulationStore.sps_id = res.data.distance_variation_data[0].sps
    // 记录最大模拟时间
    simulationStore.simulationTime = res.data.max_time_info / 60

    // TODO:--------------------乌百线和81线有安全决策---------------------------------
    const payload = {
      oils_id: selectedOilType.value,
      PUMP1: pump1.value ? '1' : '0',
      PUMP2: pump2.value ? '1' : '0',
      PUMP3: pump3.value ? '1' : '0',
      P_M_IN: terminalStationInletPressure.value,
      Q_S_OUT: flow1.value,
      T_S_OUT: firstStationOutletTemperature.value,
      T_g: pipeTemperature.value
    }
    if (predictPipeline.value === '乌百线（乌尔禾站-百克站）') {
      Promise.all([
        postSPSWBX_Qmin({ ...payload, T_m_min: simulationStore.T_m_min }),
        postSPSWBX_Qmax({ ...payload, P_S_max: simulationStore.P_S_max }),
        postSPSWBX_TSTIME_Psmin({ ...payload, T_m_min: simulationStore.T_m_min })
      ])
        .then(([qminRes, qmaxRes, psminRes]) => {
          console.log('Qmin 接口结果：', qminRes)
          console.log('Qmax 接口结果：', qmaxRes)
          console.log('TSTIME_Psmin 接口结果：', psminRes)

          if (qminRes.data.flow_and_pump_speed_data.length === 0) {
            simulationStore.isShowQmin = false
            simulationStore.T_g = qminRes.data.T_g
            simulationStore.T_S_OUT = qminRes.data.T_S_OUT
          } else {
            simulationStore.min_flow_pump_speed = qminRes.data.flow_and_pump_speed_data[0]
            simulationStore.minSafeFlow = qminRes.data.flow_and_pump_speed_data[0]
          }

          simulationStore.max_flow_pump_speed = qmaxRes.data.flow_and_pump_speed_data[0]
          simulationStore.operating_parameters =
            qmaxRes.data.operating_parameters_at_delivery_volume

          simulationStore.safeStopTime = psminRes.data.safe_shutoff_time[0].shutdown_time
          simulationStore.temperature_time_variation = psminRes.data.temperature_time_variation
        })
        .catch((err) => {
          console.error('有接口出错：', err)
        })
    }

    if (predictPipeline.value === '新81#线（81#站-701）') {
      Promise.all([
        postSPSS81_701_Qmin({ ...payload, T_m_min: simulationStore.T_m_min }),
        postSPSS81_701_Qmax({ ...payload, P_S_max: simulationStore.P_S_max }),
        postSPSS81_701_TSTIME({ ...payload, T_m_min: simulationStore.T_m_min })
      ])
        .then(([qminRes, qmaxRes, psminRes]) => {
          console.log('Qmin 接口结果：', qminRes)
          console.log('Qmax 接口结果：', qmaxRes)
          console.log('TSTIME_Psmin 接口结果：', psminRes)

          if (qminRes.data.flow_and_pump_speed_data.length === 0) {
            simulationStore.isShowQmin = false
            simulationStore.T_g = qminRes.data.T_g
            simulationStore.T_S_OUT = qminRes.data.T_S_OUT
          } else {
            simulationStore.min_flow_pump_speed = qminRes.data.flow_and_pump_speed_data[0]
            simulationStore.minSafeFlow = qminRes.data.flow_and_pump_speed_data[0]
          }

          simulationStore.max_flow_pump_speed = qmaxRes.data.flow_and_pump_speed_data[0]
          simulationStore.operating_parameters =
            qmaxRes.data.operating_parameters_at_delivery_volume

          simulationStore.safeStopTime = psminRes.data.safe_shutoff_time[0].shutdown_time
          simulationStore.temperature_time_variation = psminRes.data.temperature_time_variation
        })
        .catch((err) => {
          console.error('有接口出错：', err)
        })
    }

    if (workType.value[1] === '清管器运行') {
      router.push({
        path: '/originOil/spatiotemporalPrediction/graph',
        query: {
          isQGQYX: true,
          oils_id: selectedOilType.value
        }
      })
    } else {
      router.push({
        path: '/originOil/spatiotemporalPrediction/graph',
        query: {
          oils_id: selectedOilType.value
        }
      })
    }
  } catch (error) {
    console.error('预测失败:', error)
    ElMessage.error('预测失败，请重试')
  } finally {
    isPredictLoading.value = false
  }
}

const resetSimulation = () => {
  router.go(0)
}
</script>

<style lang="scss" scoped>
.leftBorder {
  border-left: 1px dashed black;
  border-image: repeating-linear-gradient(
      to bottom,
      black 0,
      black 8px,
      transparent 8px,
      transparent 16px
    )
    1;
}
.border {
  border: 1px solid black;
}
.rightBorder {
  border-right: 1px solid black;
}
.bottomBorder {
  border-bottom: 1px solid black;
}
.topBorder {
  border-top: 1px solid black;
}
.leftBorder2 {
  border-left: 1px solid black;
}

.bottomDashBorder {
  border-bottom: 1px dashed rgba(53, 63, 64, 0.4);
  border-image: repeating-linear-gradient(
      to right,
      rgba(53, 63, 64, 0.4) 0,
      rgba(53, 63, 64, 0.4) 8px,
      transparent 8px,
      transparent 16px
    )
    1;
}

.shadow {
  box-shadow: 3px 3px 11px 0px rgba(0, 0, 0, 0.15);
}
:deep(.no-style-input) {
  .el-input__wrapper {
    background: none;
    box-shadow: none;
    padding: 0;
  }

  .el-input__inner {
    border: none;
    background: none;
  }
}

.line {
  background: linear-gradient(
    to right,
    rgba(53, 63, 64, 0),
    rgba(53, 63, 64, 1),
    rgba(53, 63, 64, 0)
  );
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.bg_detail {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.bg_table_header {
}

.custom-button {
  background-color: rgba(69, 122, 178, 0.18);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid rgba(69, 122, 178, 1);
  border-radius: 6px;
  color: rgba(69, 122, 178, 0.8);
  width: 140px;
  height: 40px;

  cursor: pointer;
  &:hover {
    background-color: rgba(69, 122, 178, 1);
    border: 1px solid rgba(69, 122, 178, 1);
    color: white;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 6px;
  }
}

.custom-button-not-active {
  cursor: not-allowed;
  background-color: rgba(128, 128, 128, 0.58);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid gray;
  border-radius: 6px;
  color: white;
  width: 140px;
  height: 40px;
  &:hover {
    background-color: gray;
    border: 1px solid gray;
    color: white;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 6px;
  }
}
</style>
